<template>
  <view class="content">
    <view class="title">{{ $t("login.zhuCeXx") }}</view>
    <view class="sub-title">{{ $t("login.tianXieZsYx") }}</view>
    <view class="form-wrap">
      <u-form labelPosition="left" :model="formMode" :rules="rules" ref="uForm" errorType="border-bottom" :labelWidth="80">
        <u-form-item :label="$t('login.xingMing')" prop="username" borderBottom ref="item1" required>
          <view class="form-item">
            <u-input v-model="formMode.username" border="none" :placeholder="$t('login.shuRuXm')" />
          </view>
        </u-form-item>
        <u-form-item :label="$t('login.xingBie')" prop="gender" borderBottom ref="item1">
          <u-radio-group v-model="formMode.gender" placement="row">
            <view class="form-item">
              <u-radio activeColor="#75ceccFF" label="男" name='1'></u-radio>
              <u-radio activeColor="#75ceccFF" label="女" name='2'></u-radio>
            </view>
          </u-radio-group>
        </u-form-item>
        <u-form-item :label="$t('login.nianLing')" prop="age" borderBottom ref="item1">
          <view class="form-item">
            <u-input v-model="formMode.age" border="none" type="number" :placeholder="$t('login.qingShuRnL')" />
          </view>
        </u-form-item>
        <u-form-item :label="$t('login.leiXing')" prop="userType" borderBottom ref="item1" required>
          <view class="form-item">
            <u-radio-group v-model="formMode.userType" placement="row">
              <u-radio activeColor="#75ceccFF" :label="$t('login.geRen')" name='1'></u-radio>
              <u-radio activeColor="#75ceccFF" :label="$t('login.qiYeYg')" name='2'></u-radio>
            </u-radio-group>
          </view>
        </u-form-item>
        <u-form-item :label="$t('login.gongSiMc')" prop="companyName" borderBottom ref="item1" required v-if="formMode.userType == '2'">
          <view class="form-item">
            <u-input v-model="formMode.companyName" border="none" :placeholder="$t('login.shuRuGsMc')" />
          </view>
        </u-form-item>
        <u-form-item :label="formMode.userType == '1'? $t('login.geRenSfZ'):$t('login.faRenSfZ')" prop="cardImg" ref="item1" required label-position="top" borderBottom>
          <view class="uploads-img">
            <uploadImage :width="100" :height="100" :maxCount="1" :uploadText="$t('login.shenFenZzM')" @change="frontChange" />
            <uploadImage :width="100" :height="100" :maxCount="1" :uploadText="$t('login.shenFenZfM')" @change="reverseChange" />
          </view>
        </u-form-item>
        <u-form-item :label="$t('login.yingYeZz')" prop="businessLicense" ref="item1" required label-position="top" borderBottom v-if="formMode.userType == '2'">
          <view class="uploads-img">
            <uploadImage :width="100" :height="100" :maxCount="1" :uploadText="$t('login.shangChuanTp')" @change="businessChange" />
          </view>
        </u-form-item>
      </u-form>
    </view>

    <view class="next">
      <u-button type="success" loadingText="加载中" color="#75CECC" @click="submit">{{ $t('login.tiJiao') }}</u-button>
    </view>
  </view>
</template>

<script>
import uploadImage from "../../components/uploadImage.vue";
export default {
  components: {
    uploadImage,
  },
  data() {
    return {
      formMode: {
        phone: "",
        openId: "",
        username: "",
        gender: "1",
        age: "",
        userType: "1",
        businessLicense: "",
        companyName: "",
        cardImg: "",
        frontCard: "",
        reverseCard: "",
      },
      imgList: [],
      rules: {
        username: {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        userType: {
          type: "string",
          required: true,
          message: "请选择注册类型",
          trigger: ["blur", "change"],
        },
        businessLicense: {
          type: "string",
          required: true,
          message: "请上传营业执照",
          trigger: ["blur", "change"],
        },
        companyName: {
          type: "string",
          required: true,
        },
        cardImg: {
          validator: (rule, value, callback) => {
            if (
              this.formMode.frontCard?.length === 0 ||
              this.formMode.reverseCard?.length === 0
            ) {
              return false;
            } else {
              return true;
            }
          },
        },
      },
    };
  },
  onLoad(options) {
    if (options?.phone) {
      this.formMode.phone = options.phone;
    }
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: this.$t("page.shangChuanXx"),
    });
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    frontChange(value) {
      this.formMode.frontCard = value || "";
    },
    reverseChange(value) {
      this.formMode.reverseCard = value || "";
    },
    businessChange(value) {
      this.formMode.businessLicense = value || "";
    },
    submit() {
      const openId = uni.getStorageSync("openid") || "";
      this.formMode.openId = openId;
      this.$refs.uForm
        .validate()
        .then(() => {
          this.$api.registry(this.formMode).then((res) => {
            if (res.code === 0) {
              // uni.$u.toast(this.$t("login.zhuCeCg"));
              // uni.reLaunch({ url: "/pages/register/regist_index" });
              uni.showLoading({
                title: this.$t("login.zhuCeCg"),
                mask: true,
                duration: 2000,
              });
              // uni.$u.toast(this.$t("login.zhuCeCg"));
              const timer = setTimeout(() => {
                uni.reLaunch({
                  url: "/pages/register/regist_index?register=true",
                });
                clearInterval(timer);
              }, 1500);
            } else {
              uni.$u.toast(res?.msg);
            }
          });
        })
        .catch((errors) => {
          uni.$u.toast(this.$t("login.jiaoYanSb"));
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  color: #333;
  font-size: 18px;
  padding-left: 30px;
  height: 40px;
  line-height: 40px;
}
.sub-title {
  font-size: 14px;
  color: #ff6153;
  height: 30px;
  overflow: hidden;
  padding-left: 30px;
}
.form-wrap {
  padding: 0 30px;
  overflow: hidden;
}
/deep/.u-radio:last-child {
  margin-left: 20px; /* 设置radio按钮之间的水平间距为20px */
}
.uploads-img {
  display: flex;
  padding-top: 20px;
  height: 110px;
  overflow: hidden;
}
.form-item {
  height: 30px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.next {
  padding: 0 30px;
  overflow: hidden;
  height: 60px;
  margin-top: 40px;
}
</style>
